<template>
	<div class="book">
		<div slot="header" class="clearfix header">
		    <span class="header-title"><i class="el-icon-document"></i>&nbsp;&nbsp;图书 <i class="el-icon-arrow-right"></i></span>
		    <span class="head">{{bookcontent.title}}</span>
		    <span style="float: right;" type="text" class="back" @click="back">返回</span>
		</div>
		<iframe :src="bookcontent.url" width="100%" ></iframe>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				bookcontent:''
			}
		},
		methods:{
			back(){
				this.$router.push({name:'bookList'})
			},
			getBookContent(id){
				var id = this.$route.params.id
				this.$http.post('/api/resources/bookDetailInfo',{
					book_id:id
				}).then(res=>{
					this.bookcontent = res.data.data
				})
			}
		},
		created(){
			this.getBookContent()
		}
	}
</script>
<style>
	main.el-main {
		padding: 0;
	}
</style>
<style lang="less" scoped>
	.book {
		height: 100%;
    clear: both;
		.header {
			height: 50px;
			line-height: 50px;
			background-color: #dbdbdb;
      width:-webkit-calc(100% - 220px);
      width:-moz-calc(100% - 220px);
      width:calc(100% - 220px);
      position: fixed;
      z-index: 99;
			.header-title {
				background-color:#00b02d;
				color: #fff;
				display: inline-block;
				height: 50px;
				padding: 0 20px;
			}
			.back {
				display:inline-block;
				background:#9cbf83 ;
				line-height: 50px;
				padding:0 20px;
				border-radius: 5px;
				cursor:default;
				color:#fff;
			}
		}
	}

	iframe {
		display: block;
		height: 100%;
    padding-top: 48px;
	}
</style>
